<template lang="pug">
.head-wrap 
  p.top-title {{title}}
    slot
    i.iconfont.icon-search(@click="searchToggle")
  p.top-pic(v-if="type")
    img(src="../../public/top-pic.png")
  transition(name="fade")
    search(v-show="flag")
</template>
<script>
import search from '@/components/search'
export default {
  name:'heads',
  data(){
    return {
      flag:false,
    }
  },
  props:{
    type:{
      type:Number,
      default:0
    },
    title:{
      type:String,
      default:''
    }
  },
  components:{
    search
  },
  methods:{
    searchToggle(){
     this.flag = true
    }
  }
};
</script>
<style lang="scss" scoped>
.head-wrap {
  background: #333;
}
.top-title {
  text-align: center;
  font-size: .3rem;
  line-height: .88rem;
  position: relative; 
  color:#fff;
  i {
    position: absolute;
    right: .4rem;
    top:50%;
    transform: translateY(-50%);
    color:#fff;
  } 
}
img {
  width: 100%;
}
.fade-enter,.fade-leave-to {
  // transform: translateY(100%);
  opacity: 0;
}
.fade-enter-active,.fade-leave-active {
  transition:all linear .1s ;
}
</style>